<template>
  <div>

        <van-nav-bar
      title="购物车"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in lun" :key="item.id">
        <img :src="item.image_url" alt="" />
      </van-swipe-item>
    </van-swipe>

    <ul>
        <li>
            <router-link to="/list">居家</router-link>

            <router-link to="/list">餐厨</router-link>

            <router-link to="/list">配件</router-link>

            <router-link to="/list">牛逼</router-link>
        </li>
    </ul>

   
 <van-card
      v-for="item in fen"
      :key="item.id"
      :num="item.sort_order"
      :price="item.retail_price"
      :desc="item.goods_brief"
      :title="item.name"
      :thumb="item.list_pic_url"
        @click="add(item)"
    >
     <template #right>
   <img  v-lazy="item.list_pic_url" />
  </template>
     </van-card>




 
  </div>
</template>

<script>
export default {
  data() {
    return {
      lun: [],
     fen:[]
    };
  },
  mounted() {
    this.$http("//shop.bufantec.com/bufan/index/index", "get", {}).then(
      (res) => {
        console.log(res);
        this.lun = res.data.banner;
      }
    );

    this.$http(
      "//shop.bufantec.com/bufan/goods/goodsList?categoryId=1005000",
      "get",
      {}
    ).then((res) => {
      console.log(res);
      this.fen = res.data.data;
    });
   
  },
  methods: {
       onClickLeft() {
      this.$router.go(-1); 
    },
  },
};
</script>

<style lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
img {
  width: 100%;
  vertical-align: middle;
}
.van-tabs__line {
    background-color: aliceblue;
}
li{
    display: flex;
   justify-content: space-evenly;
}


 ul a{
 color: rgb(25, 26, 26);
 
}
</style>
